<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        html, body{
            background-color: rgba(0,0,0,0);
        }
        .aui-bar-tab{
            color: #CBCBCB;
        }
        .aui-bar-tab .aui-active {
        	  color: #81B846;
        }
        .footer-icon{
            position: relative;
            display: block;
            z-index: 20;
            top: 0.1rem;
            height: 1.2rem;
            margin: auto;
            margin-bottom: 2px;
            font-size: 1rem;
            line-height: 1rem;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            transition: all .1s;
        }

        .aui-bar-tab .aui-active .footer-icon{
            animation: footerTabActive .3s;
            animation-timing-function: ease-out;
            transform: scale(1.1);
        }

        .footer-icon.footer-icon-home{
            background-image: url(../image/footer/home.png);
        }
        .aui-bar-tab .aui-active .footer-icon.footer-icon-home{
        	  background-image: url(../image/footer/home_active.png);
        }
        .footer-icon.footer-icon-course{
            background-image: url(../image/footer/course.png);
        }
        .aui-bar-tab .aui-active .footer-icon.footer-icon-course{
        	  background-image: url(../image/footer/course_active.png);
        }
        .footer-icon.footer-icon-circle{
            background-image: url(../image/footer/circle.png);
        }
        .aui-bar-tab .aui-active .footer-icon.footer-icon-circle{
        	  background-image: url(../image/footer/circle_active.png);
        }
        .footer-icon.footer-icon-message{
            background-image: url(../image/footer/message.png);
        }
        .aui-bar-tab .aui-active .footer-icon.footer-icon-message{
        	  background-image: url(../image/footer/message_active.png);
        }
        .footer-icon.footer-icon-me{
            background-image: url(../image/footer/me.png);
        }
        .aui-bar-tab .aui-active .footer-icon.footer-icon-me{
        	  background-image: url(../image/footer/me_active.png);
        }
        #footer {
            box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.07);
        }
        #footer.support{
      	   background-color:rgba(255,255,255,0.8);
      	   -webkit-backdrop-filter: brightness(1) blur(20px);
      	   backdrop-filter: blur(10px);
      	}
    </style>
</head>
<body>
    <footer class="aui-bar aui-bar-tab" id="footer">
        <div class="aui-bar-tab-item" tapmode>
            <i class="footer-icon footer-icon-home"></i>
            <div class="aui-bar-tab-label">首页</div>
        </div>
        <div class="aui-bar-tab-item aui-active" tapmode>
            <i class="footer-icon footer-icon-course"></i>
            <div class="aui-bar-tab-label">地图</div>
        </div>
        <div class="aui-bar-tab-item aui-active" tapmode>
            <i class="footer-icon footer-icon-circle"></i>
            <div class="aui-bar-tab-label">农事</div>
        </div>
        <div class="aui-bar-tab-item aui-active" tapmode>
            <i class="footer-icon footer-icon-me"></i>
            <div class="aui-bar-tab-label">我的</div>
        </div>
    </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-tab.js" ></script>
<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    var tab = new auiTab({
        element:document.getElementById("footer")
    },function(ret){
        if(ret){
            var index = ret.index - 1;
            if(index == 0){
                api.setFrameGroupIndex({
                    name: 'main_group',
                    index: 1,
                    scroll: false
                });
            }else{
                api.setFrameGroupIndex({
                    name: 'main_group',
                    index: index + 2,
                    scroll: false
                });
            }
        }
    });

    apiready = function(){
        if(api.systemType=='ios' && parseInt(api.systemVersion)>=9){
            $("#footer").addClass("support");
        }
        $(".aui-bar-tab-item").removeClass("aui-active");
        $(".aui-bar-tab-item").eq(0).addClass("aui-active");
    };

    function setActive(index){
        if(index<=2){
            index = 1;
        }else{
            index = index - 1;
        }
        if(tab.nowIndex != index){
            tab.setActive(index);
        }
    }
</script>
